<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Demo</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    
    <script>
    	
    	function checknotnull(nid) {
    		var temp= document.getElementById(nid);
    		var temp_msg = document.getElementById(nid+"_msg");
    		var temp_div = document.getElementById(nid+"_div");
    		
    		var reg = /^\s*$/;
    		if(reg.test(temp.value)) {
    			temp_msg.innerHTML="不能为空";
    			temp_div.className+=" has-error";
    			return false;
    		} else {
    			temp_msg.innerHTML="";
    			temp_div.className="form-group has-success";
    			return true;
    		}
    	}
    	function checkpwd1andpwd2() {
    		var pwd1 = document.getElementById("password1").value;
    		var pwd2 = document.getElementById("password2").value;
    		
    		var pwd2_msg = document.getElementById("password2_msg");
    		var pwd2_div = document.getElementById("password2_div");
    		
    		if(pwd1==pwd2) {
    			return true;
    		} else {
    			pwd2_msg.innerHTML = "请输入正确密码";
    			pwd2_div.className="form-group has-error";
    			return false;
    		}
    	}
    	
    	//表单校验方法
    	function checkForm() {
    		var flag1 = checknotnull("userName");
    		var flag2 = checknotnull("password1");
    		var flag3 = checknotnull("password2");
    		
    		if(flag1&&flag2&&flag3) {
    			return checkpwd1andpwd2();
    		} else {
    			return false;
    		}
    	}
    </script>
    
  </head>
  <body>

  	<div class="container">
  		
  		<!-- 网站顶部 -->
  		<div class="row">
  			<div class="col-md-4"> <!-- 黑马图标 -->
  				<img src="img/logo2.png" />
  			</div>
  			<div class="col-md-4">
  				<img src="img/header.png" />
  			</div>
  			<div class="col-md-4">
  				<ul class="list-inline" style="margin-top: 10px;">
  					<li><a href="" class="btn btn-primary">登录</a></li>
  					<li><a href="" class="btn btn-primary">注册</a></li>
  					<li><a href="" class="btn btn-danger">购物车</a></li>
  				</ul>
  			</div>
  		</div>
  		
  		
  		<!-- 网站导航条-->
  	<div class="row">
  		<nav class="navbar navbar-inverse">
		  <div class="container-fluid">
		    <!-- Brand and toggle get grouped for better mobile display -->
		    <div class="navbar-header">
		      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
		        <span class="sr-only">Toggle navigation</span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		      </button>
		      <a class="navbar-brand" href="#">首页</a>
		    </div>
		
		    <!-- Collect the nav links, forms, and other content for toggling -->
		    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		      <ul class="nav navbar-nav">
		        <li class="active"><a href="#">电脑数码 <span class="sr-only">(current)</span></a></li>
		        <li><a href="#">电脑办公 </a></li>
		        <li class="dropdown">
		          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多 <span class="caret"></span></a>
		          <ul class="dropdown-menu">
		            <li><a href="#">手机配件 </a></li>
		            <li role="separator" class="divider"></li>
		            <li><a href="#">程序培训 </a></li>
		          </ul>
		        </li>
		      </ul>
		      <form class="navbar-form navbar-right "role="search">
		        <div class="form-group">
		          <input type="text" class="form-control" placeholder="Search">
		        </div>
		        <button type="submit" class="btn btn-default">Submit</button>
		      </form>
		    </div>  
		   </div> 
		</nav>
  	</div>
		 
		

  		
		
  		<!-- 网站主体-->
  	<div class="row" style="background-image: url(img/regist_bg.jpg);">
  			<div class="col-md-8 col-md-offset-2" style="border: 5px solid gray; background-color: white;">
  				<div class="row">
  					<div class="col-md-8 col-md-offset-2" style="margin-top: 15px ;margin-bottom: 15px "> <font color="blue" size="4"> 用户注册  </font></div>
  				</div>
  				<div class="row">
  					<form class="form-horizontal" onsubmit="return checkForm()">
						  <div id="userName_div" class="form-group">
						    <label class="col-sm-2 control-label">用户名</label>
						    <div class="col-sm-5">
						      <input type="text" class="form-control" id="userName" name="userName" placeholder="请输入用户名">
						    </div>
						    <label id="userName_msg" class="col-sm-4 control-label"></label>
						  </div>
						  
						  <div class="form-group" id="password1_div">
						    <label class="col-sm-2 control-label">密码</label>
						    <div class="col-sm-5">
						      <input type="password" class="form-control" id="password1" name="password1" placeholder="请输入密码">
						    </div>
						    <label id="password1_msg" class="col-sm-4 control-label"></label>
						  </div>
						  
						  <div class="form-group" id="password2_div">
						    <label class="col-sm-2 control-label">确认密码</label>
						    <div class="col-sm-5">
						      <input type="password" class="form-control" id="password2" name="password2" placeholder="请确认密码">
						    </div>
						    <label id="password2_msg" class="col-sm-4 control-label"></label>
						  </div>
						  
						  <div class="form-group">
						    <label class="col-sm-2 control-label">Email</label>
						    <div class="col-sm-5">
						      <input type="email" class="form-control" id="email" name="email" placeholder="请输入email">
						    </div>
						  </div>
						  
						  <div class="form-group">
						    <label class="col-sm-2 control-label">姓名</label>
						    <div class="col-sm-5">
						      <input type="text" class="form-control" id="Name" name="Name" placeholder="请输入姓名">
						    </div>
						  </div>
						  
						   <div class="form-group">
						    <label class="col-sm-2 control-label">性别</label>
						    <div class="col-sm-5" style="padding-top:3px ;">
						      <input type="radio" name="sex" value="man">男
						      <input type="radio" name="sex" value="woman">女
						    </div>
						  </div>

						  <div class="form-group">
						    <div class="col-sm-offset-2 col-sm-10">
						      <button type="submit" class="btn btn-primary btn-lg"> 注 册 </button>
						    </div>
						  </div>
						</form>
  				</div>
  			</div>
  		</div>
  		
  		
  		
  		<!-- 网站底部 -->
  	<div class="row">
  		<div class="col-md-12">
  			<img src="img/footer.jpg" width="100%" height="60px"/>
  		</div>
  	</div>
  	
  	
  	<div class="row">
  		<div class="col-xs-12 text-center">
  			<ul class="list-inline">
  				<li> <a href="">联系我们</a> </li>
  				<li> <a href="">联系我们</a> </li>
  				<li> <a href="">联系我们</a> </li>
  				<li> <a href="">联系我们</a> </li>
  				<li> <a href="">联系我们</a> </li>
  			</ul>
  		</div>
  	</div>
  	
  	
  	<div class="row">
  		<div class="col-xs-12 text-center">
  			Copyright © 2005-2020 黑马商城 版权所有
  		</div>
  	</div>

  	</div>
  </body>

</html>